<template lang="pug">
   <h1 v-html="showText"/>
</template>
<script>
export default {
  name: 'writer',
  components: {},
  data() {
    return {
      len: 0,
      timer: null,
    }
  },
  props: {
    text: {
      type: String,
      default: '',
    },
    inputSpeed: {
      type: Boolean,
      default: 90,
    },
    loop: {
      type: Boolean,
      default: true,
    },
    loopSpace: {
      type: Number,
      default: 2000,
    },
  },
  computed: {
    showText() {
      return this.text.substr(0, this.len)
    },
  },
  watch: {},
  methods: {
    deleteFn() {
      this.timer = setInterval(() => {
        this.len = this.len - 1
        if (this.len <= 0) {
          clearInterval(this.timer)
          this.timer = setTimeout(() => this.addFn(), this.loopSpace)
        }
      }, this.inputSpeed)
    },
    addFn() {
      this.timer = setInterval(() => {
        this.len = this.len + 1
        if (this.len > this.text.length) {
          clearInterval(this.timer)
          // if loop
          // if (this.loop) this.timer = setTimeout(() => this.deleteFn(), this.loopSpace)
          this.$emit('writeOver')
        }
      }, this.inputSpeed)
    },
  },
  created() {
    this.addFn()
  },
  mounted() {},
}
</script>

<style lang="less" scoped>
  @import url('../theme/index.less');
  h1{
    color: rgba(255, 255, 255, 0.9);;
    font-size: 3vw;
    font-weight: 100;
    margin-top: 10px;
    line-height: 1.46;
  }
  @media screen and (max-width: 800px) {
    h1{
      font-size: 8vw;
      text-align: center;
      // margin-top: 10vh;
    }
  }
</style>
